<template>
	<view>
		<!-- 顶部状态栏和导航条 -->
		<view class="top">
			<view class="status"></view>
			<view class="navbar">
				<!-- 退出按钮移到左侧 -->
				<image @click="close_btn_cliked" class="close" src="/static/close.png" mode=""></image>
				<view>AI法律援助</view>
				<!-- 对话历史按钮移到右侧 -->
				<image @click="show_model" class="more" src="/static/info.png" mode=""></image>
			</view>
		</view>

		<!-- 聊天面板 -->
		<scroll-view class="content" scroll-y="true" :scroll-top="y">
			<view v-for="(item, index) in arr">
				<view class="left" v-if="item.flag==1">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<zeromarkdownview class="text" :markdown="item.text"></zeromarkdownview>
				</view>

				<view class="left" v-else-if="item.flag==2">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<image class="chatimg" :src="item.img" mode=""></image>
				</view>
				<view class="left" v-else-if="item.flag==3">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<video class="video1" :src="item.v"></video>
				</view>
				<view class="right" v-else-if="item.flag==4">
					<view class="text">{{item.text}}</view>
					<image class="avatar" :src="item.avatar" mode=""></image>
				</view>
				<view class="right" v-else-if="item.flag==5">
					<image class="chatimg" :src="item.img" mode=""></image>
					<image class="avatar" :src="item.avatar" mode=""></image>
				</view>
				<view class="right" v-else-if="item.flag==6">
					<video class="video1" :src="item.v"></video>
					<image class="avatar" :src="item.avatar" mode=""></image>
				</view>
			</view>
		</scroll-view>

		<!-- 底部输入栏 -->
		<view class="bottombar">
			<input class="chat_input" type="text" v-model="msg" placeholder="请输入文本" />
			<view class="send_btn" @click="send">发送</view>
			<image @click="get_img" src="/static/c.png" class="camera" mode=""></image>
		</view>

		<!-- 半透明蒙层 + 右侧弹出的历史面板 -->
		<view class="model" v-if="ishow" @click="hide_model">
			<view class="rightnav" @click.stop>
				<view class="history-header">
					<text class="history-title">对话历史</text>
				</view>
				<view v-if="history_arr.length === 0" class="empty-history">
					<image class="empty-icon" src="/static/history-empty.png" mode="widthFix"></image>
					<text class="empty-text">暂无对话历史</text>
				</view>
				<scroll-view class="history-list" scroll-y="true">
					<view v-for="(item, index) in history_arr" :key="item.id" class="history-item">
						<view class="history-content">
							<text class="history-text" @click="check_history(item.id)">{{ item.title }}</text>
							<view class="history-actions">
								<image class="delete-icon" src="/static/icon/delete.png" mode="widthFix"
									@click="deleteHistory(item.id, index)"></image>
							</view>
						</view>
						<view class="history-divider" v-if="index !== history_arr.length - 1"></view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import zeromarkdownview from "@/uni_modules/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue"

	export default {
		onLoad() {
			this.get_history()
		},
		components: {
			zeromarkdownview
		},
		data() {
			return {
				subjectid: 0,
				ishow: false,
				y: 9999,
				msg: "",
				history_arr: [{
						id: 1,
						title: "历史历史记录记录"
					},
					{
						id: 2,
						title: "聊天记录"
					},
					{
						id: 3,
						title: "科技"
					},
					{
						id: 1,
						title: "历史历史记录记录"
					},
					{
						id: 2,
						title: "聊天记录"
					},
					{
						id: 3,
						title: "科技"
					},
					{
						id: 1,
						title: "历史历史记录记录"
					},
					{
						id: 2,
						title: "聊天记录"
					},
					{
						id: 3,
						title: "科技"
					},
					{
						id: 1,
						title: "历史历史记录记录"
					},
					{
						id: 2,
						title: "聊天记录"
					},
					{
						id: 3,
						title: "科技"
					}
				],
				arr: [],
			}
		},
		methods: {
			close_btn_cliked() {
				uni.navigateBack()
			},
			async send() {
				let chattext = this.msg
				let obj = {
					flag: 4,
					avatar: "../../../static/logo.png",
					text: chattext
				}
				this.arr.push(obj);
				this.msg = ""
				this.$nextTick(() => {
					this.y = this.y + 1
				})

				console.log("开始请求")
				let buffer = ""
				const response = await fetch(
					`http://localhost:8000/aichat/stream?subjectid=${this.subjectid}&info=${encodeURIComponent(chattext)}`
				);
				const reader = response.body.getReader();
				const decoder = new TextDecoder("utf-8");

				let res = {
					flag: 1,
					avatar: "../../../static/logo.png",
					text: ""
				}
				this.arr.push(res)

				let count = 0
				while (true) {
					let data = await reader.read()
					if (data.done) {
						break
					}
					let oneData = decoder.decode(data.value, {
						stream: true
					})
					if (count == 0) {
						console.log(oneData)
						this.subjectid = oneData
						count++
					} else {
						this.arr[this.arr.length - 1].text += oneData
						this.$nextTick(() => {
							this.y = this.y + 1
						})
					}
				}
			},
			get_img() {
				uni.chooseImage({
					sourceType: ["album", "camera"],
					success: (f) => {
						console.log(f)
						let img_path = f.tempFilePaths[0]
						let obj = {
							flag: 5,
							avatar: "../../../static/logo.png",
							img: img_path
						}
						this.arr.push(obj);
						this.msg = ""
						this.$nextTick(() => {
							this.y = this.y + 1
						})
					}
				})
			},
			show_model() {
				this.ishow = true
			},
			hide_model() {
				this.ishow = false
			},
			get_history() {
				// this.history_arr=[]
				uni.request({
					url: "http://localhost:8000/get_history",
					method: "GET",
					success: (res) => {
						console.log(res.data)
						this.history_arr = res.data
					}
				})
				this.ishow = false
			},
			check_history(id) {
				this.arr = []
				this.subjectid = id
				uni.request({
					url: "http://localhost:8000/get_chatcontent_at_subjectid",
					method: 'GET',
					data: {
						subjectid: id
					},
					success: res => {
						for (let index in res.data) {
							let el = res.data[index]
							let obj = {}
							obj.text = el.text
							if (el.usrname == "user") {
								obj.avatar = "static/logo.png"
								obj.flag = 4
							} else if (el.usrname == "ai") {
								obj.avatar = "static/logo.png"
								obj.flag = 1
							}
							this.arr.push(obj)
						}
						this.$nextTick(() => {
							this.y += 1
						})
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.top {}

	.top .status {
		width: 750rpx;
		height: 40rpx;
		background-color: transparent;
	}

	.top .navbar {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.top .navbar .close {
		width: 60rpx;
		height: 60rpx;
		margin-left: 10rpx;
	}

	.top .navbar .more {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}

	.content {
		width: 750rpx;
		height: 1120rpx;
		background-image: url(/static/bg.webp);
	}

	.left {
		width: 750rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.left .avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.left .text {
		font-size: 24rpx;
		background-color: azure;
		padding: 10rpx;
		letter-spacing: 2rpx;
		min-width: 20rpx;
		max-width: 560rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.right {
		width: 750rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
	}

	.right .avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.right .text {
		font-size: 24rpx;
		background-color: seagreen;
		padding: 10rpx;
		letter-spacing: 2rpx;
		min-width: 20rpx;
		max-width: 560rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.chatimg {
		width: 400rpx;
		height: 300rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}

	.chatvideo {
		width: 400rpx;
		height: 300rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}

	.bottombar {
		width: 750rpx;
		height: 100rpx;
		padding: 2rpx;
		background-color: gainsboro;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.bottombar .chat_input {
		background-color: white;
		width: 600rpx;
		height: 70rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		padding: 0rpx 10rpx;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
	}

	.bottombar .send_btn {
		background-color: #007aff;
		color: white;
		width: 80rpx;
		height: 70rpx;
		margin-top: 10rpx;
		font-size: 26rpx;
		text-align: left;
		padding-left: 20rpx;
		line-height: 70rpx;
		border-radius: 0 10rpx 10rpx 0rpx;
	}

	.bottombar .camera {
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		position: fixed;
		right: 150rpx;
		bottom: 25rpx;
	}

	/* 蒙层样式 */
	.model {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(200, 200, 200, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	/* 右侧弹出面板 */
	.model .rightnav {
		background-color: white;
		width: 430rpx;
		height: 100vh;
		position: absolute;
		right: 0;
		top: 0;
		box-shadow: -5rpx 0 10rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
		transform: translateX(0);
		overflow-y: auto;
	}

	.model .btn {
		height: 35rpx;
		font-size: 26rpx;
		padding: 10rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.history-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-history {
		width: 40rpx;
		height: 40rpx;
	}

	/* 历史记录列表 */
	.history-list {
		flex: 1;
		overflow-y: auto;
		padding: 20rpx 0;
	}

	/* 历史记录项 */
	.history-item {
		padding: 20rpx 30rpx;
	}

	.history-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
	}

	.history-text {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-right: 20rpx;
	}

	.history-actions {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.delete-icon {
		width: 35rpx;
		height: 35rpx;
		opacity: 0.7;
	}

	.delete-icon:active {
		opacity: 1;
		transform: scale(1.1);
	}

	.history-item:active {
		background-color: #f8f8f8;
		transition: background-color 0.2s;
	}

	.history-divider {
		height: 1rpx;
		background-color: #f0f0f0;
		margin: 0 30rpx;
	}

	/* 空状态 */
	.empty-history {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		flex: 1;
	}

	.empty-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	video {
		z-index: 0;
	}
</style>